<template>
  <div>
    <!--头部信息-->
    <el-row class="header" type="flex">
      <el-col :span="12" :offset="3">
        <el-link href="#/index" :underline="false" icon="el-icon-house">首页</el-link>
      </el-col>
      <!--if-->
      <el-col :span="12" :offset="14" v-if="indexData.userToken===''">
        <el-link href="#/login" :underline="false">登录</el-link>
        |
        <el-link href="#/sign" :underline="false">注册</el-link>
      </el-col>
      <!--else-->
      <el-col :span="12" :offset="14" v-else>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ indexData.userToken.username }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item v-if="indexData.userToken.rid==='1'">
              <el-link href="#/admin" :underline="false">后台管理</el-link>
            </el-dropdown-item>
            <el-dropdown-item v-if="indexData.userToken.rid==='2'">
              <el-link href="#/shop" :underline="false">店铺管理</el-link>
            </el-dropdown-item>
            <el-dropdown-item v-if="indexData.userToken.rid==='3'">
              <el-link @click="shopDialogVisible=true" :underline="false">商家入驻</el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link @click="loginOutBox" :underline="false">退出登录</el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <!--Logo与搜索-->
    <el-row class="header_container" type="flex">
      <el-col :span="12" :offset="1">
        <a href="#/index" title="试剂耗材采购管理平台">
          <el-image class="image" :src="indexData.logoUrl"></el-image>
        </a>
      </el-col>
      <el-col :span="12" :offset="9">
        <el-input style="width: 300px"
                  prefix-icon="el-icon-search"
                  placeholder="请输入商家名称"
                  @input="val=>changes(val)"
                  clearable
                  v-model="queryInfo.serachInfo">
          <el-button slot="append">查询</el-button>
        </el-input>
      </el-col>
    </el-row>
    <hr>
    <!--主体内容-->
    <div style="margin: 0 auto;text-align: center;width: 70%;height: 225px"
         v-if="indexData.data===''||indexData.data===null">
      <p style="margin-top: 225px;color: dimgrey">暂无数据</p>
    </div>
    <div style="margin: 0 auto;text-align: center;width: 70%" v-else>
      <el-row>
        <el-col :span="5" :offset="1" v-for="(item,index) in indexData.data" :key="index">
          <div class="index_container">
            <div class="index_images_container" style="border: 1px #eee solid">
              <a>
                <el-image :src="item.images" fit="cover" class="index_images"></el-image>
              </a>
            </div>
            <div class="index_title">{{ item.name }}</div>
            <div class="index_price_text">市场价：<span class="index_price">￥{{ item.price }}</span></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--分页显示-->
    <div class="index_page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[8, 16, 24, 32]"
        :page-size="queryInfo.pageSize"
        layout="total, prev, pager, next,sizes, jumper"
        :total="indexData.pageTotal">
      </el-pagination>
    </div>
    <!--页脚-->
    <div class="footer">
      <div class="footer_text">
        <el-link>关于我们</el-link>
        |
        <el-link>合作伙伴</el-link>
        |
        <el-link>广告服务</el-link>
        |
        <el-link>广告服务</el-link>
        |
        <el-link>联系我们</el-link>
        |
        <el-link>法律声明</el-link>
      </div>
      <div class="footer_banquan">
        © 2020-现在 Reagent.com 版权所有
      </div>
    </div>
    <!--商家入驻-->
    <el-dialog
      title="商家入驻"
      :visible.sync="shopDialogVisible"
      width="70%"
      center
      top="25px"
      :destroy-on-close="true"
      :simple="true"
      :align-center="true">
      <div style="margin: 0 auto;text-align: center;width: 100%">
        <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
          <el-step title="设置账户"></el-step>
          <el-step title="填写信息"></el-step>
          <el-step title="提交成功"></el-step>
        </el-steps>
        <!--设置账户-->
        <div v-if="active===0">
          <el-form :model="signShopFrom">
            <el-row>
              <el-col :span="10" :push="7">
                <el-form-item label="登陆账户:" label-width="100px" style="margin-top: 30px">
                  <el-input v-model="signShopFrom.account"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :push="7">
                <el-form-item label="设置密码:" label-width="100px" style="margin-top: 25px">
                  <el-input v-model="signShopFrom.password" type="password" show-password></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :push="7">
                <el-form-item label="确认密码:" label-width="100px" style="margin-top: 25px">
                  <el-input v-model="signShopFrom.compassword" type="password" show-password></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :push="7">
                <el-form-item style="margin-top: 25px;margin-bottom: 30px">
                  <el-checkbox v-model="signShopFrom.checked" @change="checked=>changeValues(checked)">
                    <span style="font-size: 13px;padding-left: 5px">请阅读</span>
                  </el-checkbox>
                  <el-link type="primary" :underline="false" style="padding-bottom: 3px;font-size: 13px">《网络条款》
                  </el-link>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="next">下一步</el-button>
  </span>
        </div>
        <!--填写信息-->
        <div v-if="active===1">
          <el-form :model="signShopFrom">
            <el-row style="background-color: aliceblue;width: 100%;height: 20px;margin-top: 20px">公司信息</el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <el-form-item label="公司名称:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.cname" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司地址:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.caddress" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <el-form-item label="公司资金:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.cprice" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司邮箱:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.cemail" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司电话:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.cphone" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="background-color: aliceblue;width: 100%;height: 20px">常用退货信息</el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <el-form-item label="退货地址:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.taddress" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="退货用户:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.tuser" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <el-form-item label="退货邮编:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.tcode" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="退货电话:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.tphone" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="background-color: aliceblue;width: 100%;height: 20px">公司资质信息</el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <el-form-item label="营业执照:" size="mini" label-width="100px" style="margin-top: 20px">
                  <input type="file" ref="photo1" name="photo1">
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="法人代表:" size="mini" label-width="100px" style="margin-top: 20px">
                  <input type="file" ref="photo2" name="photo2">
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="background-color: aliceblue;width: 100%;height: 20px">店铺信息</el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <el-form-item label="店铺名称:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.shopname" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="店铺品牌:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.shoppai" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="background-color: aliceblue;width: 100%;height: 20px">银行信息</el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <el-form-item label="银行名称:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.bankname" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行账号:" size="mini" label-width="100px" style="margin-top: 20px">
                  <el-input v-model="signShopFrom.banknum" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="com">下一步</el-button>
                    </span>
        </div>
        <!--提交成功-->
        <div v-if="active===2">
          <div style="height: 100%;height: 250px;font-size: 20px">
            <p style="margin-top: 250px">商家信息提交成功，请耐心等待管理员审核！</p>
          </div>
          <span slot="footer" class="dialog-footer">
    <el-button type="success" @click="confrim">返回首页</el-button>
                    </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import logo from '@/assets/images/logo/logo1.png'

export default {
  name: 'index',
  data () {
    return {
      queryInfo: {
        currentPage: 1,
        serachInfo: '',
        pageSize: 8,
      },
      indexData: {
        logoUrl: logo,
        pageTotal: 0,
        data: [],
        userToken: ''
      },
      signShopFrom: {
        checked: false,
      },
      active: 0,
      shopDialogVisible: false,
      src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1819593698,2302420779&fm=26&gp=0.jpg'
    }
  },
  created () {
    this.getToken()
    this.getShopInfoAll()
  },
  methods: {
    // 获取Token
    async getToken () {
      if (sessionStorage.getItem('token') !== '') {
        const { data: res } = await axios.get('/getToken')
        this.indexData.userToken = res.data
      } else {
        return false
      }
    },
    // 获取商品信息
    async getShopInfoAll () {
      const { data: res } = await axios.get('/getGoodsInfo', { params: this.queryInfo })
      if (res.status === 200) {
        console.log(res.data)
        if (res.data === null) {
          this.indexData.pageTotal = 0
          this.indexData.data = ''
        } else {
          this.indexData.pageTotal = res.data.pageTotal
          this.indexData.data = res.data.list
        }
        return false
      }
      this.$message.error(res.message)
    },
    // 退出登录
    loginOutBox () {
      this.$confirm('确定退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit('delToken')
        this.indexData.userToken = ''
        this.$message.success('退出成功!')
        this.$router.push('/index')
      }).catch(() => {
        return false
      })
    },
    // 切换每页显示条数
    handleSizeChange (val) {
      this.queryInfo.pageSize = val
      this.getShopInfoAll()
    },
    // 点击页面
    handleCurrentChange (val) {
      this.queryInfo.currentPage = val
      this.getShopInfoAll()
    },
    // 下一步
    next () {
      if (!this.signShopFrom.checked) return this.$message.info('请选择《网络条款》')
      if (this.active++ > 3) {
        this.shopDialogVisible = false
      }
    },
    // 提交信息
    com () {
      const _this = this
      const formData = new FormData()
      console.log(this.signShopFrom)
      console.log(this.$refs.photo1.files[0])// 获取文件信息
      console.log(this.$refs.photo2.files[0])
      formData.append('account', this.signShopFrom.account)
      formData.append('password', this.signShopFrom.password)
      formData.append('cname', this.signShopFrom.cname)
      formData.append('caddress', this.signShopFrom.caddress)
      formData.append('cemail', this.signShopFrom.cemail)
      formData.append('cprice', this.signShopFrom.cprice)
      formData.append('cphone', this.signShopFrom.cphone)
      formData.append('taddress', this.signShopFrom.taddress)
      formData.append('tcode', this.signShopFrom.tcode)
      formData.append('tuser', this.signShopFrom.tuser)
      formData.append('tphone', this.signShopFrom.tphone)
      formData.append('shopname', this.signShopFrom.shopname)
      formData.append('shoppai', this.signShopFrom.shoppai)
      formData.append('bankname', this.signShopFrom.bankname)
      formData.append('banknum', this.signShopFrom.banknum)
      formData.append('photo1', this.$refs.photo1.files[0])
      formData.append('photo2', this.$refs.photo2.files[0])
      axios({
        method: 'POST',
        url: '/addApply',
        data: formData,
        headers: {
          'content-type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.status === 200) {
          this.$message.success(res.data.message)
          return
        }
        this.$message.error(res.data.message)
      }).catch(err => {
        this.$message.success('服务器未响应')
      })
      this.active++
    },
    // 复选框
    changeValues (value) {
      this.signShopFrom.checked = value
    },
    // 完成处理
    confrim () {
      this.shopDialogVisible = false
      this.active = 0
      this.signShopFrom.checked = false
      this.$router.replace('/index')
    },
    // 实时搜索
    changes (val) {
      console.log(val)
      this.queryInfo.serachInfo = val
      this.getShopInfoAll()
    }
  }
}
</script>

<style scoped>
@import "../assets/css/index.css";
@import '../assets/css/login.css';
</style>
